<template>
	<div id="app">
		<div class="userinfo">
      <div class="tip_box"><i class="el-icon-warning" style="color: #1677FF;margin-right: 8px"></i> 提示：未进行实名认证的账号无法进行稿酬结算，有任何疑问请联系责编。</div>
			<ul class="infoBox">
				<li class="item">
					<div class="labal">{{$t("home.name")}}</div>
					<div class="content">
						<p>{{user.name}}</p>
					</div>
				</li>
				<li class="item">
					<div class="labal">{{$t("home.IDNumber")}}</div>
					<div v-if="user.idCode" class="content">
						<p>{{user.idCode}}</p>
					</div>
					<div v-else class="content">
						<p style="cursor: pointer; color: #3385FD;text-decoration:underline" @click="realNameShow = true">{{$t("home.toAuthentication")}}</p>
					</div>
					<el-dialog title="" :visible.sync="realNameShow" center>
						<div slot="header" class="clearfix">
							<span>{{$t("home.authentication")}}</span>
							<el-button style="float: right; padding: 3px 0" type="text">x</el-button>
						</div>
						<div class="tip">
							{{$t("home.tips")}}：<br>{{$t("home.realNameModified")}}<br>{{$t("home.protectionInformation")}}
						</div>
						<el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-position="left" label-width="100px" class="demo-ruleForm">

							<el-form-item :label="$t('home.realName')" prop="realName">
								<el-input prop="realName" :placeholder="$t('home.enterrealName')" v-model="ruleForm.realName"></el-input>
							</el-form-item>
							<el-form-item :label="$t('home.IDNumber')" prop="IDNumber">
								<el-input prop="name" :placeholder="$t('home.enterIDNumber')" v-model="ruleForm.IDNumber"></el-input>
							</el-form-item>
							<el-form-item :label="$t('home.uploadDocuments')" prop="IDcardPic">
								<el-upload style="display: inline-block;"  class="avatar-uploader" action="string"
								 :show-file-list="false" :http-request="imgSuccess" :before-upload="beforeAvatarUpload">
									<img v-if="ruleForm.IDcardPic" :src="ruleForm.IDcardPic" class="avatar">
									<div class="avatar-uploader-icon el-icon-plus idCard_off"></div>
								</el-upload>
								<el-upload style="float: left;" ref="upLoadImg" class="avatar-uploader" action="string" :http-request ='handleAvatarSuccessx'
								 :show-file-list="false" >
									<img v-if="ruleForm.IDcardPicback" :src="ruleForm.IDcardPicback" class="avatar">
									<div class="avatar-uploader-icon el-icon-plus idCard_on"></div>
								</el-upload>
								<span style="position: absolute;right: 165px;top:40%;width: 171px;height: 44px;font-size: 16px;font-weight: 400;color: #CCCCCC;line-height: 22px;">
									{{$t("home.jpgOrPngFile5")}}
								</span>
							</el-form-item>

							<el-form-item>
                <div class="button_box">
                  <el-button style="width: 221px;" type="info" @click="cancel('ruleForm')">{{$t("home.cancel")}}</el-button>
								  <el-button style="width: 221px;" type="primary" @click="confrim('ruleForm')">{{$t("home.applyImmediately")}}</el-button>
                </div>
							
							</el-form-item>
						</el-form>
						<!-- <span slot="footer" class="dialog-footer">
					    <el-button @click="centerDialogVisible = false">取 消</el-button>
					    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
					  </span> -->
					</el-dialog>
				</li>
				<li class="item">
					<div class="labal">{{$t("home.beTiedPhone")}}</div>
					<div v-if="user.phone" class="content">
						<p>{{user.phone | phoneFilters}}</p>
					</div>
					<div v-else class="content">
						<p>{{user.phone | phoneFilters}}</p>
					</div>
					<!-- <div class="content">
						<router-link class="tocent" to="/author/center/userInfo/changePhone">
							<p>{{$t("home.modifyBindPhone")}}</p>
						</router-link>
					</div> -->

				</li>
				<!-- <li class="item">
					<div class="tip">
						{{$t("home.tips")}}：<br>
						{{$t("home.cannotBeSettled")}}<br>
						{{$t("home.questionsContact")}}
					</div>
				</li> -->

			</ul>
		</div>
	</div>
</template>

<script>
import { uploadFile } from "@/api/info";
export default {
  data: function () {
    return {
      IDcardPic: "",
      IDcardPicx: "",
      realNameShow: false,
      user: {
        name: "",
        isReal: true,
        idCode: null,
        phone: "",
      },
      // realInfo: {
      //   realName: "",
      //   IDNumber: "",
      //   IDcardPic: "",
      // },
      ruleForm: {
        realName: "",
        IDNumber: "",
        IDcardPic: "",
        IDcardPicback: "",
      },
      rules: {
          realName: [
            { required: true, message: '请输入真实姓名', trigger: 'blur' },
          ],
          IDNumber: [
            { required: true, message: '请输入身份证号码', trigger: 'blur' },
            { min: 18, max: 18, message: '请输入正确的身份证号码', trigger: 'change' }
          ],
          IDcardPic: [
            { required: true, message: '请上传正确的身份证', trigger: 'blur' },
            { required: true, message: '请上传正确的身份证', trigger: 'change' }
          ],
        }
    };
  },
  filters: {
    phoneFilters: function (value) {
      let newTel = value.substr(0, 3) + "****" + value.substr(7);
      return newTel;
    },
  },
  methods: {
    //
    imgSuccess(res) {
      let params = res.file; 
      this.ruleForm.IDcardPic = URL.createObjectURL(params);
      let formData = new FormData();
      formData.append("file", params);
      uploadFile(formData).then((res) => {
        sessionStorage.setItem('certificatesB',res.source)
      });
    },
    // 证件上传
    httpRquest(srcUrl){
      
    },
    beforeAvatarUpload(file) {
      const isJPGorPNG =
        file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPGorPNG) {
        this.$message.error(this.$t('home.uploadJpgFormat'));
      }
      if (!isLt2M) {
        this.$message.error(this.$t('home.uploadProfile2'));
      }
      return isJPGorPNG && isLt2M;
    },
    handleAvatarSuccessx(res) {
      let params = res.file; // this.$refs.upLoadImg.uploadFiles[0].raw
      this.ruleForm.IDcardPicback = URL.createObjectURL(params);
      let formData = new FormData();
      formData.append("file", params);
      uploadFile(formData).then((res) => {
        sessionStorage.setItem('certificatesA',res.source)
      });
    },
    cancel(formName) {
      this.realNameShow = false;
      this.$refs[formName].resetFields();
    },
    confrim(formName) {
       this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      // this.realNameShow = false
      // this.$message({
      //   type:'error',
      //   message:this.$t('home.realNameAuthenticationSucceeds')
      // })
    },
  },
  mounted() {
    this.user.name = JSON.parse(sessionStorage.getItem("userInfo")).realName;
    this.user.phone = localStorage.getItem("autherPhone");
  },
};
</script>

<style scoped="scoped" lang="scss">
.el-form-item{
  margin-bottom: 40px;
}
.idCard_on::after {
  white-space: pre;
  font-size: 12px;
  line-height: 30px;
  content: "上传正面";
}

.idCard_off::after {
  white-space: pre;
  font-size: 12px;
  line-height: 30px;
  content: "上传反面";
}

a {
  p {
    color: #21d4cf;
  }
}

.userinfo {
  .infoBox {
    display: flex;
    flex-direction: column;
    .item {
      display: flex;
      flex-direction: row;
      margin: 10px 0;

      .labal {
        display: flex;
        width: 130px;
        text-align: right;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
        padding-left: 30px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666;
        margin-right: 30px;
      }

      .content {
        margin-left: 10px;

        p {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }

      .tip {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #cccccc;
        line-height: 25px;
        margin-bottom: 20px;
      }
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  box-sizing: border-box;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 1px dashed #d9d9d9;
  margin-right: 20px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  position: absolute;
}
.tip_box{
  width: 616px;
  height: 40px;
  background: #EDF5FF;
  border: 1px solid #97C3FF;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 0 auto 40px auto;
}
.button_box{
  display: flex;
  justify-content: center;
  margin-top: 70px;
}
::v-deep .el-button--primary{
  margin-left: 40px;
}
</style>
